<template>
	<view class="container">
		<!-- 页面内容 -->
		<view class="wrapper">
			<view class="set_nav">
				<view class="nav-item" @click="navigateTo('/pages/my/change-paypw')">
					<view class="nav-left">
						<text class="nav-title">修改支付密码</text>
					</view>
					<view class="nav-right">
						<image class="arrow-icon" :src="serverAddress+'img/icon-back1.png'" mode="aspectFit"></image>
					</view>
				</view>
				<view class="nav-item" @click="navigateTo('/pages/my/findback-paypw')">
					<view class="nav-left">
						<text class="nav-title">忘记支付密码</text>
					</view>
					<view class="nav-right">
						<image class="arrow-icon" :src="serverAddress+'img/icon-back1.png'" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			inject
		} from 'vue'
export default {
	data() {
		return {
			serverAddress: inject('$serverAddress'),
			title: '支付设置'
		};
	},
	onLoad() {
		// 页面加载时执行
	},
	methods: {
		// 页面导航
		navigateTo(url) {
			uni.navigateTo({
				url: url,
				fail: (err) => {
					console.error('导航失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f7f7f7;
	min-height: 100vh;
}

.wrapper {
	background-color: #ffffff;
	font-size: 28rpx;
	padding-top: 20rpx;
}

.set_nav {
	// width: 100%;
	padding: 0 30rpx;
	background-color: #ffffff;
}

.nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #E8E8E8;
	cursor: pointer;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f5f5f5;
	}
}

.nav-left {
	flex: 1;
}

.nav-title {
	color: #333333;
	font-size: 28rpx;
}

.nav-right {
	display: flex;
	align-items: center;
}

.arrow-icon {
	width: 15rpx;
	height: 50rpx;
	margin-left: 32rpx;
}
</style>